<template>
  <div class="mainContent">
    <h2>上传需要分析的数据</h2>
    <div slot="tip" class="el-upload__tip">只能上传csv文件 具体的上传文件规则可以下载我们的示例文件进行查看</div>
    <div slot="tip" class="el-upload__tip">data文件 行（x）为样本个数 列(y)为样本的维度 文件内容应为x*y大小的样本主体数据</div>
    <div slot="tip" class="el-upload__tip">label文件 行（x）为样本个数 列(l)为样本的标签 文件内容应为x*l大小的样本标签数据</div>
    <div slot="tip" class="el-upload__tip">coordinate文件 行（y）为样本的维度 列为1 文件内容应为x*1大小的坐标数据</div>
    <el-row>
      <h4>上传主体数据</h4>
      <el-upload
        class="upload-datafile"
        :action="uploadDataUrl"
        :with-credentials="true"
        :before-upload="beforeFileUpload"
        accept=""
        :on-success="onSuccess"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList1"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-row>
    <el-row>
      <h4>上传数据的标签信息</h4>
      <el-upload
        class="upload-datafile"
        :action="uploadLabelUrl"
        :with-credentials="true"
        :before-upload="beforeFileUpload"
        accept=""
        :on-success="onSuccess"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList2"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-row>
    <el-row>
      <h4>上传数据的坐标信息</h4>
      <el-upload
        class="upload-datafile"
        :action="uploadCoordinateUrl"
        :with-credentials="true"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :before-upload="beforeFileUpload"
        accept=""
        :on-success="onSuccess"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList3"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-row>
    <h4>示例数据</h4>
    <el-button size="small" @click="setExampleFile()">使用我们的数据</el-button>
    <el-button size="small" @click="setExampleFile2()"
      >使用我们的数据</el-button
    >
    <h2>已上传数据信息</h2>
    <el-row v-if="fileList1[0]">
      <h4>主体数据</h4>
      <el-table :data="fileList1" style="width: 100%">
        <el-table-column prop="name" label="文件名" width="180">
        </el-table-column>
        <el-table-column prop="url" label="地址" width="180">
          <template slot-scope="scope">
            <el-button size="small" @click="downLoadUploadedFile(scope.row.url)"
              >下载原文件</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="shape1" label="x大小"> </el-table-column>
        <el-table-column prop="shape2" label="y大小"> </el-table-column>
      </el-table>
    </el-row>
    <br />
    <el-row v-if="fileList2[0]">
      <h4>标签数据</h4>
      <el-table :data="fileList2" style="width: 100%">
        <el-table-column prop="name" label="文件名" width="180">
        </el-table-column>
        <el-table-column prop="url" label="地址" width="180">
          <template slot-scope="scope">
            <el-button size="small" @click="downLoadUploadedFile(scope.row.url)"
              >下载原文件</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="shape1" label="x大小"> </el-table-column>
        <el-table-column prop="shape2" label="y大小"> </el-table-column>
      </el-table>
    </el-row>
    <br />
    <el-row v-if="fileList3[0]">
      <h4>坐标数据</h4>
      <el-table :data="fileList3" style="width: 100%">
        <el-table-column prop="name" label="文件名" width="180">
        </el-table-column>
        <el-table-column prop="url" label="地址" width="180">
          <template slot-scope="scope">
            <el-button size="small" @click="downLoadUploadedFile(scope.row.url)"
              >下载原文件</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="shape1" label="x大小"> </el-table-column>
        <el-table-column prop="shape2" label="y大小"> </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
<script>
import user from "@/api/user";
import { Message } from "element-ui";
export default {
  data() {
    return {
      fileList1: [],
      fileList2: [],
      fileList3: [],
      uploadDataUrl:
        `http://${process.env.API_URL || "localhost"}:${
          process.env.API_PORT || 500
        }/api/upload/uploadFile/data` + "",
      uploadLabelUrl:
        `http://${process.env.API_URL || "localhost"}:${
          process.env.API_PORT || 500
        }/api/upload/uploadFile/label` + "",
      uploadCoordinateUrl:
        `http://${process.env.API_URL || "localhost"}:${
          process.env.API_PORT || 500
        }/api/upload/uploadFile/coordinate` + "",
    };
  },
  created() {
    this.getFileList();
  },
  methods: {
    getFileList() {
      user.findSessionUpload().then((res) => {
        var sessionData = res.data.data;
        if (sessionData.dataPath) {
          this.fileList1 = [
            {
              name: sessionData.dataPath.split("/")[
                sessionData.dataPath.split("/").length - 1
              ],
              url: sessionData.dataPath,
              shape1: sessionData.dataShape.FileShape1,
              shape2: sessionData.dataShape.FileShape2,
            },
          ];
        }
        if (sessionData.labelPath) {
          this.fileList2 = [
            {
              name: sessionData.labelPath.split("/")[
                sessionData.labelPath.split("/").length - 1
              ],
              url: sessionData.labelPath,
              shape1: sessionData.labelShape.FileShape1,
              shape2: sessionData.labelShape.FileShape2,
            },
          ];
        }
        if (sessionData.coordinatePath) {
          this.fileList3 = [
            {
              name: sessionData.coordinatePath.split("/")[
                sessionData.coordinatePath.split("/").length - 1
              ],
              url: sessionData.coordinatePath,
              shape1: sessionData.coordinateShape.FileShape1,
              shape2: sessionData.coordinateShape.FileShape2,
            },
          ];
        }
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeFileUpload(file) {
      // const isEXCEL = file.type === 'application/vnd.ms-excel';
      const isEXCEL = file.type === "text/csv";
      const isLt = file.size / 1024 / 1024 < 50;

      if (!isEXCEL) {
        this.$message.warning("请上传正确格式");
      }
      if (!isLt) {
        this.$message.warning("小于50M");
      }
      return isEXCEL && isLt;
    },
    onSuccess(response, file, index) {
      var fileList = [];
      if (response.error_code == 200) {
        file.url = response.data.webPath;
        file.shape1 = response.data.shape.FileShape1;
        file.shape2 = response.data.shape.FileShape2;
        fileList[0] = file;
      } else if (response.error_code == 500) {
        fileList = [];
        Message.error("上传失败，请检查是否符合规范");
      }
      if (response.data.dataType == "label") {
        this.fileList2 = fileList;
      } else if (response.data.dataType == "coordinate") {
        this.fileList3 = fileList;
      } else if (response.data.dataType == "data") {
        this.fileList1 = fileList;
      }
    },
    setExampleFile() {
      user.setExampleFile();
      // this.getFileList();
      location.reload();
    },
    setExampleFile2() {
      user.setExampleFile2();
      // this.getFileList();
      location.reload();
    },
    downLoadUploadedFile(filePath) {
      window.open(
        `http://${process.env.API_URL || "localhost"}:${
          process.env.API_PORT || 500
        }` + filePath
      );
    },
    handlePreview(file) {
      window.open(
        `http://${process.env.API_URL || "localhost"}:${
          process.env.API_PORT || 500
        }` + file.url
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
      user.deleteUploadFile(file.name).then((res) => {
        fileList = [];
      });
    },
  },
};
</script>

<style>
.el-row {
  margin: 10px;
}
.el-button {
  margin: 10px;
}
</style>